<template>
	<view>
		<navbar :isback="true" title="手机登录"></navbar>
		<view class="con">
			<image src="/static/logo.png" class="con__logo" mode=""></image>
			<view class="form">
				
				<view class="u-flex form__item" style="border-bottom: 1rpx solid #dadbde;">
					<u--input placeholder="请输入手机号" border="none" maxlength="11" type="number" v-model="form.mobile"
						@change="change" clearable>
					</u--input>
					<text @tap="getCode" :style="{color:color}">{{tips}}</text>
				</view>
				<view style="height: 30rpx;width: 650rpx;"></view>
				<view class="u-flex form__item" style="border-bottom: 1rpx solid #dadbde;">
					<u--input placeholder="请输入验证码" border="none" type="number" maxlength='6' v-model="form.code"
						@change="change1" clearable>
					</u--input>
				</view>
				
			</view>
			<view style="height: 80rpx;width: 650rpx;"></view>
			<u-button text="登录" @click="login" :disabled="disabled" color="linear-gradient(87deg, #3494FF, #3989FF)"
				:customStyle="{height:'80rpx',}" :loading='loading'></u-button>
			<!-- <view class="con__btn">
				<u-button text="手机号一键登录" v-if="!isgx" @click="nogx" color="linear-gradient(87deg, #3494FF, #3989FF)" :customStyle="{height:'80rpx',}"></u-button>
				<u-button text="手机号一键登录" v-else @getphonenumber="getphonenumber" openType="getPhoneNumber" color="linear-gradient(87deg, #3494FF, #3989FF)" :customStyle="{height:'80rpx',}"></u-button>
				<view class="" style="height: 50rpx;width: 650rpx;">
					
				</view>
				<u-button text="其它手机号登录" @click="clickqt" plain  :customStyle="{height:'80rpx',}"></u-button>
			</view> -->
			
			<u-code ref="uCode" @change="codeChange" seconds="10" changeText="X秒重新获取"></u-code>
		</view>
	</view>
</template>

<script>
	import user from '@/api/_user.js'
	export default {
		data() {
			return {
				isgx: false,
				form: {
					username:'永夜',
					password:'123456',
					mobile: '',
					code: ''
				},
				tips: '',
				color: '#333',
				disabled: true,
				loading:false
			};
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (!this.form.mobile) {
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					user.smssend({mobile:this.form.mobile,event:'register'}).then(res=>{
						if(res.data.code==1){
							uni.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						}
					})
					// setTimeout(() => {
					// 	uni.hideLoading();
					// 	// 这里此提示会被this.start()方法中的提示覆盖
					// 	uni.$u.toast('验证码已发送');
					// 	// 通知验证码组件内部开始倒计时
					// 	this.$refs.uCode.start();
					// }, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			change(e) {
				if (e.length == 11) {
					this.color = "#3494FF"
				}
				if (e.length == 11 && this.form.code.length >= 4) {
					this.disabled = false
				} else {
					this.disabled = true
				}
			},
			change1(e) {
				if (e.length >= 4 && this.form.mobile.length == 11) {
					this.disabled = false
				} else {
					this.disabled = true
				}
			},
			login() {
				this.loading=true
				user.register(this.form).then(res=>{
					this.loading=false
					console.log(res)
				})
			}
		},
		onReady() {
			// 注意这里不能将一个组件赋值给data的一个变量，否则在微信小程序会
			// 造成循环引用而报错，如果你想这样做，请在非data中定义refCode变量
			this.refCode = this.$refs.uCode;
		},
	}
</script>

<style lang="scss">
	.con {
		padding: 100rpx 50rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;

		&__logo {
			width: 160rpx;
			height: 160rpx;
			border-radius: 40rpx;
			margin-bottom: 200rpx;
		}

		&__btn {
			width: 650rpx;
			margin-bottom: 100rpx;
		}

		&__text {
			font-size: 24rpx;
			margin-left: 10rpx;
		}
	}

	.form {
		width: 650rpx;
		&__item{
			padding: 20rpx;
		}
	}
</style>